<template>
<view class="return">
  <view class="return__goods">
    <goods :goodsData="goods"></goods>
  </view>
  <view class="return__dr">
    <u-cell-group>
      <u-cell  title="物流公司" :required="true" :value="form.deliveryCompany||'请选择'" isLink @click="toggleSheetVisible"></u-cell>
      <!-- //TODO 添加u-field组件 -->
      <!-- <u-field :value="form.deliverySn" @change="setForm" data-key="deliverySn" label="物流单号" placeholder="请输入物流单号" type="text" maxlength="18" required :border="false"></u-field> -->
      <u-cell  title="物流单号" :required="true">
        <u-input slot="value" border="true" :value="form.deliverySn" @change="setForm" @focus="inputKey='deliverySn'" placeholder="请输入物流单号" maxlength="24"></u-input>
      </u-cell>
    </u-cell-group>
  </view>
  <view class="return__dr">
    <u-cell-group>
      <u-cell  title="联系电话" :required="true">
        <u-input slot="value" border="true" :value="form.phone" @change="setForm" @focus="inputKey='phone'" placeholder="请输入联系电话" maxlength="11"></u-input>
      </u-cell>
      <u-cell  title="退货说明" :required="true">
        <u-input slot="value" border="true" :value="form.reason" @change="setForm" @focus="inputKey='reason'" placeholder="请输入退货说明"></u-input>
      </u-cell>
      <!-- <u-field :value="form.phone" @change="setForm" data-key="phone" label="联系电话" placeholder="请输入联系电话" type="number" maxlength="11" required :border="false"></u-field> -->
      <!-- <u-field :value="form.reason" @change="setForm" data-key="reason" label="退货说明" placeholder="请输入退货说明" required :border="false"></u-field> -->
    </u-cell-group>
  </view>
  <view class="return__submit" @tap="handleReturn">提交</view>
  <u-action-sheet title="选择物流" :show="sheetVisible" :actions="actions" @close="onClose" @select="onSelect"></u-action-sheet>
</view>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
interface interForm{
    deliveryCompany:string
    deliverySn:string
    deliveryCode:string
    phone:string
    reason:string
}
import { returnOfGoods, getLogisticsCompany } from "@/api/modules/afterSale";
import goods from "@/components/goods/goods.vue"
@Component({components:{
    goods
}})
export default class AfterSaleReturn extends Vue {
    goods:object={}
    form:interForm={
      deliveryCompany: "",
      deliverySn: "",
      deliveryCode: "",
      phone: "",
      reason: "",
    }
    actions:Array<any>= []
    sheetVisible:boolean=false
    afsId:string=''
    inputKey='deliverySn'
    onLoad({ goods,afsId }) {
    this.goods=JSON.parse(goods)
    this.afsId=afsId
    // this.setDataSmart({ goods: JSON.parse(goods) });
    getLogisticsCompany({})
      .then(res => {
        const list = res.logisticsCompanyVos.map(item => {
          return {
            name: item.name,
            id: item.logisticsCompanyId,
          };
        });
        this.actions=list
      })
      .catch(() => {
        this.$Popup.toast("获取失败");
      });
    }
    setForm(e) {
        this.form=Object.assign(this.form,{ [this.inputKey]: e }) 
    }
    handleReturn() {
        if (!this.$global.isPhone(this.form.phone)) {
        return this.$Popup.toast("请填写正确手机号");
        }
        if (!this.form.deliveryCompany) {
        return this.$Popup.toast("请选择物流公司");
        }
        if (!this.form.deliverySn) {
        return this.$Popup.toast("请填写物流单号");
        }
        if (!this.form.reason) {
        return this.$Popup.toast("请填写退货说明");
        }
        returnOfGoods({ afsId: this.afsId, ...this.form })
        .then(() => {
            uni.navigateBack({ delta: 2 });
            this.$Popup.toast("退货成功");
        })
        .catch(() => {
            this.$Popup.toast("退货失败");
        });
    }

    onClose() {
        this.toggleSheetVisible();
    }

    onSelect({ name, id  }) {
        this.form.deliveryCompany=name
        this.form.deliveryCode=id
    }

    toggleSheetVisible() {
        this.sheetVisible=!this.sheetVisible
    }
}
</script>
<style lang='scss' scoped>
@include b(return) {
  width: 100vw;
  height: 100vh;
  background: #f4f4f4;

  @include e(goods) {
    background: #fff;
    margin-bottom: 10px;
    padding: 5px;
  }

  @include e(dr) {
    background: #fff;
    margin-bottom: 10px;
  }

  @include e(submit) {
    width: 100%;
    padding: 15px 10px;
    background: $main-light-color;
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    color: #fff;
    font-size: 16px;
  }
}

</style>